<template>
  <div id="weeklySearch">
    <!--    标签选择-->
    <div class="search-nav">
      <div class="nav-body">
        <a-menu v-model:selectedKeys="current" mode="horizontal">
          <a-menu-item key='0' @click="listClick(0,activeKey)">
            <span rel="noopener noreferrer">推荐</span>
          </a-menu-item>
          <a-menu-item :key=item.value v-for="(item,i) in labelData" @click="listClick(labelData[i].value,activeKey)">
            <span rel="noopener noreferrer">{{ item.label }}</span>
          </a-menu-item>
        </a-menu>
      </div>
    </div>
    <!--    标签内容-->
    <div class="search-content">
      <div class="content-body">
        <div class="by-right-slide">
          <div class="by-right">
            <div class="tit">
              <div class="tit-excellent">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_1276_14103)">
                    <path
                        d="M9 11.1262C11.8995 11.1262 14.25 8.90659 14.25 6.16856C14.25 3.43054 11.8995 1.21094 9 1.21094C6.10051 1.21094 3.75 3.43054 3.75 6.16856C3.75 8.90659 6.10051 11.1262 9 11.1262Z"
                        stroke="#6777EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M6.1575 10.3391L5.25 16.7911L9 14.6664L12.75 16.7911L11.8425 10.332" stroke="#6777EF"
                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </g>
                  <defs>
                    <clipPath id="clip0_1276_14103">
                      <rect width="18" height="16.9976" fill="white" transform="translate(0 0.501953)"/>
                    </clipPath>
                  </defs>
                </svg>
                <p>优秀作者榜</p>
              </div>
            </div>
            <div class="int-author">
              <div class="int-aut-body" v-for="(item,i) in authorData">
                <div class="int-author-portrait">
                  <p>{{ item.portrait }}</p>
                </div>
                <div class="int-author-right">
                  <p>{{ item.username }}</p>
                  <p><span>{{ item.grade }}</span><span>{{ item.introduce }}方向</span></p>
                </div>

              </div>
            </div>
            <div class="int-author-bottom">
              <router-link to="">
                <p><span>更多作者</span>
                  <svg class="svg" width="18" height="18" viewBox="0 0 18 18" fill="none"
                       xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.75 13.5L11.25 9L6.75 4.5" stroke="#465059" stroke-width="1.5" stroke-linecap="round"
                          stroke-linejoin="round"/>
                  </svg>
                </p>
              </router-link>

            </div>
          </div>
        </div>
        <div class="by-left">
          <div class="by-left-nav">
            <a-tabs v-model:activeKey="activeKey" :change="logClick(activeKey)">
              <!--              热点页内容-->
              <a-tab-pane :key="0" tab="热点">
                <a-skeleton active :loading="activeDisplay">
                  <div v-if="activeExistence">
                    <div id="hotspot">
                      <div class="hotspot-cord" v-for="(item,i) in publicData">
                        <div class="cord-body" @click="hotspotClick(publicData[i].id)">
                          <p class="first-tit"><span class="author">{{ item.username }}</span>
                            <span class="timer">
                                <span>{{ item.create_time }}</span>
                            </span>
                            <span class="label">{{ item.labelA }}</span>
                            <span v-if="item.labelB==false"></span>
                            <span v-else>
                              <span class="label"> {{ item.labelB }}</span>
                            </span>
                          </p>
                          <div class="tit">
                            <p>{{ item.title }}</p>
                          </div>
                          <div class="introduction">
                            <div class="int-txt">
                              <p>{{publicData[i].text}}</p>
                            </div>
                            <div class="display">
                              <div v-if="item.background">
                                <a-image
                                    :src="item.background"
                                    fallback=""
                                />
                              </div>
                              <div v-else>

                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="volume">
                          <p>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path
                                  d="M0.666687 7.99935C0.666687 7.99935 3.33335 2.66602 8.00002 2.66602C12.6667 2.66602 15.3334 7.99935 15.3334 7.99935C15.3334 7.99935 12.6667 13.3327 8.00002 13.3327C3.33335 13.3327 0.666687 7.99935 0.666687 7.99935Z"
                                  stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
                              <path
                                  d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
                                  stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <span>{{ item.browse }}</span>
                            <span
                                @click="()=>
                                {
                                  fabClick(publicData[i].id)
                                  if(liked){
                                    item.likes+=1;
                                  }else{
                                    item.likes+=0;
                                  }
                                }
                              "  class="give">
                               <svg class="fabulous" width="16" height="16" viewBox="0 0 16 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                              <path
                                  d="M4.66665 14.6673H2.66665C2.31302 14.6673 1.97389 14.5268 1.72384 14.2768C1.47379 14.0267 1.33331 13.6876 1.33331 13.334V8.66732C1.33331 8.3137 1.47379 7.97456 1.72384 7.72451C1.97389 7.47446 2.31302 7.33398 2.66665 7.33398H4.66665M9.33331 6.00065V3.33398C9.33331 2.80355 9.1226 2.29484 8.74753 1.91977C8.37245 1.5447 7.86375 1.33398 7.33331 1.33398L4.66665 7.33398V14.6673H12.1866C12.5082 14.671 12.8202 14.5583 13.0653 14.35C13.3103 14.1417 13.4718 13.8519 13.52 13.534L14.44 7.53398C14.469 7.34289 14.4561 7.14777 14.4022 6.96215C14.3483 6.77653 14.2547 6.60485 14.1279 6.45899C14.0011 6.31314 13.844 6.19661 13.6677 6.11746C13.4914 6.03832 13.2999 5.99846 13.1066 6.00065H9.33331Z"
                                  :stroke="unique(publicData[i].id)?'#6777EF':'#262626'" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                          </svg>
                          <span>{{ item.likes }}</span>
                        </span>
                          </p>
                        </div>
                      </div>
                      <div class="example">
                        <div v-if="activeSpin">
                          <a-spin tip="正在加载中..." :spinning="activeSpin"/>
                        </div>
                        <div v-else>
                          <p>到底咯lol</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="empty">
                      <p>暂无该标签周报</p>
                    </div>
                  </div>
                </a-skeleton>
              </a-tab-pane>
              <!--              最新页内容-->
              <a-tab-pane :key="1" tab="最新">
                <a-skeleton :loading="activeDisplay" active>
                  <div v-if="activeExistence">
                    <div id="newest">
                      <div class="newest-cord" v-for="(item,i) in publicData">
                        <div style="cursor: pointer" @click="hotspotClick(publicData[i].id)">
                          <p class="first-tit"><span class="author">{{ item.username }}</span>
                            <span class="timer">
                              <span>{{ item.create_time }}</span>
                            </span>
                            <span class="label">{{ item.labelA }}</span>
                            <span v-if="item.labelB==false"></span>
                            <span v-else>
                              <span class="label"> {{ item.labelB }}</span>
                            </span>
                          </p>
                          <div class="tit">
                            <p>{{ item.title }}</p>
                          </div>
                          <div class="introduction">
                            <div class="int-txt">
                              <p>{{publicData[i].text}}</p>
                            </div>
                            <div class="display">
                              <div v-if="item.background">
                                <a-image
                                    :src="item.background"
                                    fallback=""
                                />
                              </div>
                              <div v-else>

                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="volume">
                          <p>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                              <path
                                  d="M0.666687 7.99935C0.666687 7.99935 3.33335 2.66602 8.00002 2.66602C12.6667 2.66602 15.3334 7.99935 15.3334 7.99935C15.3334 7.99935 12.6667 13.3327 8.00002 13.3327C3.33335 13.3327 0.666687 7.99935 0.666687 7.99935Z"
                                  stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
                              <path
                                  d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
                                  stroke="#262626" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <span>{{ item.browse }}</span>
                            <span
                                @click="()=>
                                {
                                  fabClick(publicData[i].id);

                                  if(liked){
                                    item.likes++;
                                  }else{
                                    item.likes+=0;
                                  }
                                }
                              "
                                class="give">
                               <svg class="fabulous" width="16" height="16" viewBox="0 0 16 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                              <path
                                  d="M4.66665 14.6673H2.66665C2.31302 14.6673 1.97389 14.5268 1.72384 14.2768C1.47379 14.0267 1.33331 13.6876 1.33331 13.334V8.66732C1.33331 8.3137 1.47379 7.97456 1.72384 7.72451C1.97389 7.47446 2.31302 7.33398 2.66665 7.33398H4.66665M9.33331 6.00065V3.33398C9.33331 2.80355 9.1226 2.29484 8.74753 1.91977C8.37245 1.5447 7.86375 1.33398 7.33331 1.33398L4.66665 7.33398V14.6673H12.1866C12.5082 14.671 12.8202 14.5583 13.0653 14.35C13.3103 14.1417 13.4718 13.8519 13.52 13.534L14.44 7.53398C14.469 7.34289 14.4561 7.14777 14.4022 6.96215C14.3483 6.77653 14.2547 6.60485 14.1279 6.45899C14.0011 6.31314 13.844 6.19661 13.6677 6.11746C13.4914 6.03832 13.2999 5.99846 13.1066 6.00065H9.33331Z"
                                  :stroke="unique(publicData[i].id)?'#6777EF':'#262626'" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                          </svg>
                          <span>{{ item.likes }}</span>
                        </span>
                          </p>
                        </div>
                      </div>
                      <div class="example">
                        <div v-if="activeSpin">
                          <a-spin tip="正在加载中..." :spinning="activeSpin"/>
                        </div>
                        <div v-else>
                          <p>到底咯lol</p>
                        </div>
                      </div>
                    </div>

                  </div>
                  <div v-else>
                    <div class="empty">
                      <p>暂无该标签周报</p>
                    </div>
                  </div>
                </a-skeleton>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>

      </div>
    </div>

    <!--    编写文章按钮跳转-->
    <div class="writing">
      <router-link to="/weekly/weeklyEdit">
        <svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_1307_13955)">
            <circle cx="43" cy="38" r="28" fill="white"/>
          </g>
          <path fill-rule="evenodd" clip-rule="evenodd"
                d="M43.0002 27.6875C41.7921 27.6875 40.8127 28.6669 40.8127 29.875V35.5H35.1877C33.9796 35.5 33.0002 36.4794 33.0002 37.6875C33.0002 38.8956 33.9796 39.875 35.1877 39.875H40.8127V45.5C40.8127 46.7081 41.7921 47.6875 43.0002 47.6875C44.2083 47.6875 45.1877 46.7081 45.1877 45.5V39.875H50.8127C52.0208 39.875 53.0002 38.8956 53.0002 37.6875C53.0002 36.4794 52.0208 35.5 50.8127 35.5H45.1877V29.875C45.1877 28.6669 44.2083 27.6875 43.0002 27.6875Z"
                fill="#4E5969"/>
          <defs>
            <filter id="filter0_d_1307_13955" x="0" y="0" width="86" height="86" filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                             result="hardAlpha"/>
              <feOffset dy="5"/>
              <feGaussianBlur stdDeviation="7.5"/>
              <feComposite in2="hardAlpha" operator="out"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1307_13955"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1307_13955" result="shape"/>
            </filter>
          </defs>
        </svg>
      </router-link>

    </div>
    <!--    回到顶部按钮-->
    <div class="backTop">
      <a-back-top>
        <svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_1325_13522)">
            <circle cx="43" cy="38" r="28" fill="white"/>
          </g>
          <path d="M43 46.75V29.25" stroke="#465059" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M34.25 38L43 29.25L51.75 38" stroke="#465059" stroke-width="3.5" stroke-linecap="round"
                stroke-linejoin="round"/>
          <defs>
            <filter id="filter0_d_1325_13522" x="0" y="0" width="86" height="86" filterUnits="userSpaceOnUse"
                    color-interpolation-filters="sRGB">
              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                             result="hardAlpha"/>
              <feOffset dy="5"/>
              <feGaussianBlur stdDeviation="7.5"/>
              <feComposite in2="hardAlpha" operator="out"/>
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1325_13522"/>
              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1325_13522" result="shape"/>
            </filter>
          </defs>
        </svg>
      </a-back-top>
    </div>
  </div>


</template>

<script>
import {defineComponent, getCurrentInstance, ref, reactive} from 'vue';
import {MailOutlined, AppstoreOutlined, SettingOutlined} from '@ant-design/icons-vue';
import hotspot from "./articleStorage/weeklyHotspot";
import newest from "./articleStorage/weeklyNewest";
import $store from "@/store"
import router from "../../router";
import {message} from "ant-design-vue";
import Icon from '@ant-design/icons-vue';
import {
  LikeOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: 'weeklySearch',

  setup() {
    let {proxy} = getCurrentInstance();

    //文章数据存放
    const publicData = ref([]);

    //优秀作者数据存放
    const authorData = ref([]);


    //获取热点和最新的key值
    // 热点/最新 文章显示,标签内容展示

    const key = ref();
    const labelType = ref();
    const activeDisplay = ref();
    const activeExistence = ref();
    const activeSpin = ref();
    const bottomOut = ref();
    const logClick = (type) => {
      listClick(labelType.value, type);
    }



    const txt = ref();
    const second_txt = ref();
    //列表标签点击展示数据
    const listClick = (label, type) => {
      let pageNum = 1;
      labelType.value = label;
      bottomOut.value = false;
      key.value = type;
      proxy.$request('get', '/api/v1/user/weekly/list/' + label + '/' + type + '?page=' + pageNum, {}).then(res => {
        publicData.value = res.data
        console.log(res.data)
        for (let j = 0; j < res.data.length; j++) {
          res.data[j].labelA = res.data[j].label[0]
          if (res.data[j].label[0] == undefined) {
            res.data[j].labelA = false
          } else {
            res.data[j].labelA = res.data[j].label[0].label
          }

          if (res.data[j].label[1] == undefined) {
            res.data[j].labelB = false
          } else {
            res.data[j].labelB = res.data[j].label[1].label
          }
        }
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].username.length >= 6) {
            res.data[i].username = res.data[i].username.slice(2, 5)
          } else if (res.data[i].username.length < 6) {
            res.data[i].username = res.data[i].username.slice(2, 4)
          }
        }
        if (res.data.length <= 0) {
          activeExistence.value = false;
        } else {
          activeExistence.value = true;
        }
      })

      //下拉底部加载新数据
      window.onscroll = () => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //滚动条到底部的条件
        if (scrollTop + windowHeight >= scrollHeight - 50 && !bottomOut.value) {
          bottomOut.value = true;
          activeSpin.value = true;
          proxy.$request('get', '/api/v1/user/weekly/list/' + labelType.value + '/' + key.value + '?page=' + ++pageNum, {}).then(res => {
            console.log(res.data)
            if (res.data.length == 0) {
              window.onscroll = ''
              console.log('ting')
            } else {
              for (let i = 0; i < res.data.length; i++) {
                publicData.value.push(res.data[i])
              }
              for (let j = 0; j < res.data.length; j++) {
                res.data[j].labelA = res.data[j].label[0]
                if (res.data[j].label[0] == undefined) {
                  res.data[j].labelA = false
                } else {
                  res.data[j].labelA = res.data[j].label[0].label
                }

                if (res.data[j].label[1] == undefined) {
                  res.data[j].labelB = false
                } else {
                  res.data[j].labelB = res.data[j].label[1].label
                }
              }
            }
            bottomOut.value = false;
            activeSpin.value = false;
          })
        }
      }
      activeDisplay.value = true;
      setTimeout(() => {
        activeDisplay.value = false;
      }, 1000)
    }


    //点击传值id返回给周报详情页
    const hotspotClick = (index) => {
      router.push('/weekly/weeklyContent' + '/' + index);
    }

    //点赞数量
    let fabNum = ref(0);
    //存放用户点赞id的文章
    let clickData = [];
    // let display = ref(true)
    const unique = (id) => {
      const set = new Set(clickData);
      if (set.has(id)) {
        return true
      } else {
        return false
      }
    }
    const liked = ref(true);
    const likedColor = ref();
    const fabClick = (id) => {
      clickData.push(id);
      proxy.$request('post', '/api/v1/user/weekly/likes/' + id, {id: id}).then(res => {
        console.log(res)
        switch (res.code) {
          case 4007:
            liked.value = false;
            break;
          case 200:
            liked.value = true;
            break;
        }
      })
    }


    const hover = ref('#262626');
    const mouseover = () => {
      console.log('鼠标移入')
      hover.value = '#3C50E1'
    }

    const mouseleave = () => {
      console.log('鼠标移出')
      hover.value = '#262626'
    }
    //获取所有标签
    const labelData = ref([]);
    proxy.$request('get', '/api/v1/user/weekly/release', {}).then(res => {
      console.log(res)
      labelData.value = res.data
    })


    //优秀作者展示
    proxy.$request('get', '/api/v1/user/weekly/author', {}).then(res => {
      authorData.value = res.data
      console.log(res.data)
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].username.length >= 6) {
          res.data[i].username = res.data[i].username.slice(2, 5)
        } else if (res.data[i].username.length < 6) {
          res.data[i].username = res.data[i].username.slice(2, 4)
        }

        if (res.data[i].username.length == 3) {
          res.data[i].portrait = res.data[i].username.slice(1, 3)
        } else if (res.data[i].username.length == 2) {
          res.data[i].portrait = res.data[i].username
        }
      }

    })

    return {
      current: ref(['0']),
      activeKey: ref(0),
      listClick,
      publicData,
      authorData,
      hotspotClick,
      fabClick,
      fabNum,
      labelData,
      labelType,
      activeDisplay,
      activeExistence,
      mouseover,
      mouseleave,
      hover,
      unique,
      logClick,
      liked,
      likedColor,
      activeSpin
    };
  },
  components: {
    hotspot,
    newest,
    MailOutlined,
    AppstoreOutlined,
    SettingOutlined,
    LikeOutlined,
    Icon,
  },
})
</script>

<style lang="less">
body {
  background: #F5F5F5;
}

ul {
  list-style: none;
}

#weeklySearch {
  width: 100%;

  a {
    text-decoration: none;
  }

  .search-nav {
    display: flex;
    justify-content: center;
    background-color: #fff;
    margin-bottom: 25px;
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 64px;
    box-shadow: 0 3px 6px 1px rgba(0 0 0 .5);
    border-top: 3px solid #F5F5F5;
    opacity: 0.8;
    .nav-body {
      width: 1200px;
      display: flex;

      .ant-menu-overflow {
        width: 1200px;
      }

      .ant-menu-overflow {
        border: none;

        .ant-menu-overflow-item::after {
          display: none;
        }
      }
    }
  }

  .search-content {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;

    .content-body {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 135px;

      .by-left {
        width: 946px;
        background-color: #fff;
        min-height: 100vh;
        .by-left-nav {
          .ant-tabs-bar {
            border: none;

            .ant-tabs-tab {
              font-size: 16px;
              font-weight: 400;
            }

            .ant-tabs-tab:first-child {
              border-right: 1px solid #C7C7C7;
              height: 25px;
              width: 72px;
              padding-top: 0;
              margin: 0 17px;
            }

            .ant-tabs-tab:last-child {
              padding-left: 0;
            }

            .ant-tabs-ink-bar {
              display: none !important;
            }
          }

          .ant-tabs-top {
            .ant-tabs-content-animated {
              .ant-tabs-tabpane-active {
                width: 95%;
                margin-left: 30px;
              }
            }
          }

          .empty {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
              font-size: 18px;
            }
          }
        }
      }

      .by-right-slide {
        width: 230px;
        height: 100%;

        .by-right {
          width: 230px;
          height: 0;
          background-color: #FFFFFF;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          position: fixed;

          .tit {
            display: flex;
            padding: 5px 10px 0 10px;
            width: 100%;
            background-color: #fff;

            .tit-excellent {
              width: 100%;
              height: 40px;
              display: flex;
              margin-left: 10px;
              align-items: center;

              p {
                color: #6777EF;
                font-size: 16px;
                margin: 0;
              }
            }

          }

          .int-author {
            width: 100%;
            background-color: #fff;
            border-top: 2px solid #F5F5F5;
            display: flex;
            flex-wrap: wrap;
            padding-left: 15px;
            align-items: center;
            justify-content: space-between;

            .int-aut-body {
              width: 100%;
              height: 90px;
              margin-left: -17px;
              border-bottom: 2px solid #F5F5F5;
              display: flex;
              justify-content: space-between;
              align-items: center;
              cursor: pointer;
              .int-author-portrait {
                width: 44px;
                height: 44px;
                background-color: #3C50E1;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-content: center;
                margin-left: 20px;

                p {
                  font-size: 12px;
                  color: #fff;
                  font-weight: bold;
                  line-height: 44px;
                }
              }

              .int-author-right {
                width: 70%;
                margin-top: -5px;

                p {
                  margin: 9px 0 0 8px;
                  font-size: 16px;
                  font-weight: bold;
                }

                p:last-child {
                  font-size: 12px;
                  color: #C7C7C7;
                  margin-top: 5px;
                  margin-left: 5px;

                  span {
                    margin: 0 2px;
                    font-weight: lighter;
                  }
                }

              }
            }

            .int-aut-body:last-child {
              border: none;
            }
          }


          .int-author-bottom {
            width: 100%;
            height: 52px;
            background-color: #fff;
            border-top: 2px solid #F5F5F5;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;

            p {
              line-height: 52px;
              margin: 0;
              display: flex;
              align-items: center;

              .svg {
                margin-top: 4px;
              }

              span {
                margin: 0 5px;
                color: #465059;
              }
            }
          }
        }
      }

    }

  }

  #hotspot {
    margin-top: -20px;

    .hotspot-cord {
      width: 946px;
      height: 178px;
      overflow: hidden;
      padding: 15px;
      border-top: 2px solid #F5F5F5;
      border-bottom: 0px solid #F5F5F5;
      margin-left: -30px;
      cursor: pointer;

      .cord-body {
        cursor: pointer;
        height: 90%;

        .first-tit {
          color: #465059;
          display: flex;

          .author {
            margin: 0 15px;
          }

          .timer {
            display: inline-block;
            border-right: 1px solid #465059;
            border-left: 1px solid #465059;
            width: 70px;
            height: 15px;
            text-align: center;
            position: relative;
            top: 4px;

            span {
              position: absolute;
              width: 100%;
              left: 0;
              top: -3px;
            }
          }

          .label {
            margin: 0 15px;
            color: #2F80ED;
          }

          span {
            margin: 0;
          }
        }

        .tit {
          margin-left: 15px;

          p {
            font-weight: bold;
            font-size: 16px;
            margin: 10px 0;
            color: black;
          }
        }

        .introduction {
          display: flex;
          justify-content: space-between;
          margin-left: 15px;
          height: 60px;
          .int-txt {
            height: 60px;
            p {
              color: #465059;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-wrap: break-word;
              word-break: break-all;
              img {
                display: none;
              }
            }
          }

          .display {
            margin: -55px 0 0 70px;
            img {
              width: 204px;
              height: 124px;
            }
          }
        }
      }


      .volume {
        p {
          margin-left: 15px;
          color: #262626;
          display: flex;
          align-items: center;

          .fabulous {
            margin-left: 18px;
          }

          span {
            margin: 0 5px;
          }
        }
        .give{
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .example {
      text-align: center;
      background: #fff;
      border-radius: 4px;
      padding: 30px 50px;
      border-top: 3px solid #F5F5F5;
    }
  }

  #newest {
    margin-top: -20px;

    .newest-cord {
      width: 946px;
      height: 178px;
      padding: 15px;
      border-top: 2px solid #F5F5F5;
      margin-left: -30px;
      cursor: pointer;
      border-bottom: none;

      .first-tit {
        color: #465059;
        display: flex;

        .author {
          margin: 0 15px;
        }

        .timer {
          display: inline-block;
          border-right: 1px solid #465059;
          border-left: 1px solid #465059;
          width: 70px;
          height: 15px;
          text-align: center;
          position: relative;
          top: 4px;

          span {
            position: absolute;
            width: 100%;
            left: 0;
            top: -3px;
          }
        }

        .label {
          margin: 0 15px;
          color: #2F80ED;
        }

        span {
          margin: 0;
        }
      }

      .tit {
        margin-left: 15px;

        p {
          font-weight: bold;
          font-size: 16px;
          margin: 10px 0;
          color: black;
        }
      }

      .introduction {
        display: flex;
        justify-content: space-between;
        margin-left: 15px;
        height: 60px;
        .int-txt {
          height: 60px;
          p {
            font-size: 12px;
            color: #465059;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-wrap: break-word;
            word-break: break-all;
            img {
              display: none;
            }
          }
        }

        .display {
          margin: -55px 0 0 70px;
          img {
            width: 204px;
            height: 124px;

          }
        }
      }

      .volume {
        p {
          margin-left: 15px;
          color: #262626;
          display: flex;
          align-items: center;

          .fabulous {
            margin-left: 18px;
          }

          span {
            margin: 0 5px;
          }
        }
        .give{
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .example {
      text-align: center;
      background: #fff;
      border-radius: 4px;
      padding: 30px 50px;
      border-top: 3px solid #F5F5F5;
    }
  }

  .writing {
    position: fixed;
    bottom: 140px;
    right: 20px;
  }

  .backTop {
    .ant-back-top {
      position: fixed;
      bottom: 123px;
      right: 65px;
    }

  }
}
</style>